import echarts from 'echarts'
import mapName from './mapName'
const install = function (Vue) {
  Object.defineProperties(Vue.prototype, {
    $charts: {
      get () {
        return {
          chinaMap (id, data) {
            const myEcharts = echarts.init(document.getElementById(id)) // 获取dom并进行初始化
            const option = { // 参数设置
              tooltip: { // 地图区域的提示框
                triggerOn: 'mousemove', // 指定事件类型，提供了三种，mousemove click none
                enterable: true,
                formatter (data) { // 事件执行的函数，data为默认参数，就是当前鼠标指向的省份区域
                  return `<a href='/cities/${data.name}' style='color:#fff'><div style='font-size:12px;'><p>${data.name + data.seriesName}</p><p>现存确诊:${data.value}</p>注意防护安全<p></p></div></a>` // 返回一个div内容
                }
              },
              visualMap: [{ // 映射--颜色值
                type: 'piecewise', // 分段
                inverse: true,
                orient: 'vertical', // 垂直显示
                // orient: 'horizontal' // 横向显示,
                pieces: [ // 配置颜色区间
                  { min: 0, max: 0, color: '#FFFFFF' },
                  { min: 1, max: 10, color: '#FDFDCF' },
                  { min: 10, max: 100, color: '#FE9E83' },
                  { min: 100, max: 500, color: '#E55A4E' },
                  { min: 500, max: 10000, color: '#4F070D' }
                ]
              }],
              series: [{ // 地图的一些样式配置，可自定义
                name: '省',
                type: 'map', // 配置图表类型
                map: 'china', // 中国地图
                roam: false, // 是否允许缩放
                zoom: 1.2, // 地图缩放比例
                label: { // 配置字体
                  normal: { // 必须写的对象
                    show: true,
                    textStyle: { // 字体样式设置
                      fontSize: 8
                    }
                  }
                },
                itemStyle: { // 地图中的样式
                  normal: { // 必须写的
                    areaColor: 'rgba(0,255,236,0.1)', // 区域颜色
                    borderColor: 'rgba(255,0,0,0.2)' // 区域边框颜色
                  },
                  emphasis: { // 阴影的一些配置
                    areaColor: 'rgb(255,165,0)',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 10,
                    borderWidth: 0,
                    shadowColor: 'rgba(0,0,0,0.5)'
                  }
                },
                data: data
              }]
            }
            myEcharts.setOption(option)
          },
          // 世界地图
          worldMap: function (id, data) {
            const dom = document.getElementById(id)
            const myChart = echarts.init(dom)
            const option = { // 参数设置
              tooltip: { // 地图区域的提示框
                triggerOn: 'mousemove', // 指定事件类型，提供了三种，mousemove click none
                formatter (data) { // 事件执行的函数，data为默认参数，就是当前鼠标指向的省份区域
                  return `<div style='font-size:12px;'><p>${data.name}</p><p>现存确诊:${data.value}</p>注意防护安全<p></p></div>` // 返回一个div内容
                }
              },
              visualMap: [{ // 映射--颜色值
                type: 'piecewise', // 分段
                inverse: true,
                orient: 'vertical', // 垂直显示
                // orient: 'horizontal' // 横向显示,
                pieces: [ // 配置颜色区间
                  { min: 0, max: 1000, color: '#FFFFFF' },
                  { min: 1000, max: 100000, color: '#FDFDCF' },
                  { min: 100000, max: 500000, color: '#FE9E83' },
                  { min: 500000, max: 1000000, color: '#E55A4E' },
                  { min: 1000000, max: 1000000000, color: '#4F070D' }
                ]
              }],
              series: [{ // 地图的一些样式配置，可自定义
                name: '世界地图',
                type: 'map', // 配置图表类型
                map: 'world', // 中国地图
                roam: true, // 是否允许缩放
                zoom: 1.8, // 地图缩放比例
                label: { // 配置字体
                  normal: { // 必须写的对象
                    show: false,
                    textStyle: { // 字体样式设置
                      fontSize: 8
                    }
                  }
                },
                nameMap: mapName,
                itemStyle: { // 地图中的样式
                  normal: { // 必须写的
                    areaColor: 'rgba(0,255,236,0.1)', // 区域颜色
                    borderColor: 'rgba(255,0,0,0.2)' // 区域边框颜色
                  },
                  emphasis: { // 阴影的一些配置
                    areaColor: 'rgb(255,165,0)',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 10,
                    borderWidth: 0,
                    shadowColor: 'rgba(0,0,0,0.5)'
                  }
                },
                data: data
              }]
            }
            myChart.setOption(option)
          },
          provinceMap (id, city, data) {
            const myEcharts = echarts.init(document.getElementById(id))
            const option = {
              tooltip: { // 地图区域的提示框
                triggerOn: 'mousemove', // 指定事件类型，提供了三种，mousemove click none
                formatter (data) { // 事件执行的函数，data为默认参数，就是当前鼠标指向的省份区域
                  return `<div style='font-size:12px;'><p>${data.name}</p><p>现存确诊:${data.value}</p>注意防护安全<p></p></div>` // 返回一个div内容
                }
              },
              visualMap: [{ // 映射--颜色值
                type: 'piecewise', // 分段
                inverse: true,
                orient: 'vertical', // 垂直显示
                // orient: 'horizontal' // 横向显示,
                pieces: [ // 配置颜色区间
                  { min: 0, max: 0, color: '#FFFFFF' },
                  { min: 1, max: 10, color: '#FDFDCF' },
                  { min: 10, max: 100, color: '#FE9E83' },
                  { min: 100, max: 500, color: '#E55A4E' },
                  { min: 500, max: 10000, color: '#4F070D' }
                ]
              }],
              series: [{ // 地图的一些样式配置，可自定义
                name: '市',
                type: 'map', // 配置图表类型
                map: city, // 中国地图
                // roam: true, // 是否允许缩放
                zoom: 1.2, // 地图缩放比例
                label: { // 配置字体
                  normal: { // 必须写的对象
                    show: true,
                    textStyle: { // 字体样式设置
                      fontSize: 8
                    }
                  }
                },
                nameMap: mapName,
                itemStyle: { // 地图中的样式
                  normal: { // 必须写的
                    areaColor: '#fff', // 区域颜色
                    borderColor: 'rgba(255,0,0,0.2)' // 区域边框颜色
                  },
                  emphasis: { // 阴影的一些配置
                    areaColor: 'rgb(255,165,0)',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 10,
                    borderWidth: 0,
                    shadowColor: 'rgba(0,0,0,0.5)'
                  }
                },
                data
              }]
            }
            myEcharts.setOption(option)
          }
        }
      }
    }
  })
}

export default install
